<template>
  <a-card>
    <div v-if="mod=='normal'">
      <a-space class="operator">
        <a-button @click="addNew" type="primary">新建</a-button>
        <!-- <a-button @click="remove">删除</a-button> -->
      </a-space>
      <standard-table
        rowKey="id"
        :loading='loading'
        :columns="columns"
        :dataSource="dataSource"
        :pagination="{total:count,pageSize:limit,current:page,showTotal:total => `共 ${total} 人`}"
        @clear="onClear"
        @change="onChange"
      >
        <div slot="username" slot-scope="{record}">
          {{record.username}}
        </div>
        <div slot="status" slot-scope="{record}">
          {{record.status | getStatus}}
        </div>
        <div slot="action" slot-scope="{record}">
          <a style="margin-right: 8px" @click="edit(record.id)">
            <a-icon type="edit"/>编辑
          </a>
          <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.id)'>
            <a >
              <a-icon type="delete" />删除
            </a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <div v-if="mod=='add'||mod=='edit'">
      <accountDetail :mod.sync="mod" :id="detail_id" />
    </div>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import {getUser,delUser} from '@/api/modules/setting'
import accountDetail from './account_detail'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    scopedSlots: { customRender: 'username' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'account',
  components: {StandardTable,accountDetail},
  data () {
    return {
      mod:'normal',

      advanced: true,
      columns: columns,
      selectedRows: [],
      loading:false,

      count:0,
      limit:10,
      page:1,
      dataSource: [],

      detail_id:0,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.getUserData()
    },
    getUserData(){
      const _this = this;
      this.loading = true;
      let params = {
        page:_this.page,
        limit:_this.limit
      }
      getUser(params).then((res) => {
        _this.dataSource = res.data.data
        _this.count = res.data.count
        _this.loading = false;
      });
    },
    edit(id){
      console.log(id)
      this.detail_id = id
      this.mod = 'edit'
    },
    deleteRecord(id) {
      delUser({id}).then(() => {
        this.$message.success('删除成功')
        this.init()
      }).catch(() => {
        this.$message.error('删除失败')
      });
    },


    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange(e) {
      this.page = e.current
      this.init()
    },
    onSelectChange() {
      this.$message.info('选中行改变了')
    },
    addNew () {
      this.detail_id = 0
      this.mod = 'add'
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    }
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.init()
      }
    }
  },
  filters:{
    getStatus(e){
      switch(e){
        case 1:case '1':
          return '正常'
        case 2:case '2':
          return '异常'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
